<template>
  <div class="dialog__container">
    <el-dialog
      v-model="dialogVisible"
      title="选择工艺"
      draggable
      width="50%"
      :before-close="beforeClose"
    >
      <div class="dialog__body__container">
        <el-table
          v-loading="loading"
          border
          :data="tableData"
          highlight-current-row
          style="width: 100%"
          max-height="500"
          show-overflow-tooltip
          ref="singleTableRef"
          @current-change="handleCurrentChange"
        >
          <el-table-column label="选中状态" width="100" align="center">
            <template #default="scope">
              <div
                v-if="currentRow && currentRow.craftId === scope.row.craftId"
              >
                <i-ep-circle-check-filled class="table__select__icon" />
              </div>
              <div v-else class="table__circle__container"></div>
            </template>
          </el-table-column>
          <el-table-column label="序号" width="100" align="center">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否默认工艺" width="90" align="center">
            <template #default="scope">
              <span v-if="scope.row.default == 1" class="success-text"
                >默认工艺</span
              >
            </template>
          </el-table-column>

          <el-table-column property="addTime" label="添加时间" width="170">
          </el-table-column>
          <el-table-column property="content" label="工艺内容">
            <template #default="scope">
              <div class="row_content-container">
                <div
                  class="content_item-container"
                  v-for="(item, index) in scope.row.content"
                  :key="item.id"
                >
                  <div class="item_content">
                    {{ item.content || "暂无步骤内容" }}
                  </div>
                  <div
                    class="step-text"
                    v-if="index < scope.row.content.length - 1"
                  >
                    <i-ep-right class="icon" />
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmDialog"> 确定 </el-button>
          <el-button @click="beforeClose"> 取消 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="SelectCraftStateDialog">
defineOptions({
  name: "SelectCraftStateDialog",
  inheritAttrs: false,
});
import { getCraftList } from "@/api/craft/index";
import { type CraftItem, CraftContent } from "@/api/craft/types";
import { type ElTable } from "element-plus";
const dialogVisible = ref<boolean>(false);
const emits = defineEmits(["success"]);
// 打开弹窗逻辑
const handleOpen = (data: CraftItem | null) => {
  console.log("打开了重新选择弹窗  ", data);
  if (data) {
    currentRow.value = { ...data };
    setCurrent(currentRow.value);
  }
  dialogVisible.value = true;
};
// 设置刚开始默认当前选中
const singleTableRef = ref<InstanceType<typeof ElTable>>();
const setCurrent = (row?: CraftItem | null) => {
  singleTableRef.value?.setCurrentRow(row);
};
defineExpose({
  handleOpen,
});
// 关闭函数
const beforeClose = (done: any) => {
  currentRow.value = null;
  setCurrent(null);
  // 处理关闭逻辑
  if (typeof done === "function") {
    done();
  } else {
    dialogVisible.value = false;
  }
};
// 确认弹窗
const confirmDialog = () => {
  emits(
    "success",
    currentRow.value
      ? {
          ...currentRow.value,
        }
      : null
    // currentRow.value
    //   ? {
    //       ...currentRow.value,
    //       content: currentRow.value.content.map((elm: CraftContent) => {
    //         return {
    //           ...elm,
    //           isDone: 0,
    //         };
    //       }),
    //     }
    //   : null
  );
  beforeClose(null);
};
// 表格数据
const tableData = ref<CraftItem[]>([]);
const loading = ref<boolean>(false);
// 获取工艺列表
const getCraftListService = async () => {
  let params = {
    page: 1,
    limit: 0,
  };
  loading.value = true;
  let res = await getCraftList(params);
  loading.value = false;
  if (res) {
    tableData.value = [...res.data.list];
  }
};

// 调用
getCraftListService();

const currentRow = ref<CraftItem | any>(null);
// 表格单选
const handleCurrentChange = (val: CraftItem | undefined) => {
  currentRow.value = val;
};
</script>

<style lang="scss" scoped>
.dialog__container {
  .dialog__body__container {
    box-sizing: border-box;
    padding-right: 15px;
    max-height: 70vh;
    overflow-y: auto;
    .table__select__icon {
      font-size: 16px;
      color: var(--el-color-primary);
    }
    .table__circle__container {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid var(--el-border-color);
      display: inline-block;
    }
    .row_content-container {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .content_item-container {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        .item_content {
          // flex: 1 1 auto;
          flex-shrink: 0;
        }
        .step-text {
          flex: 1 1 auto;
          margin: 0 5px;
          display: flex;
          align-items: center;
          .icon {
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>
